import { Space, Button } from "antd";
import { useState } from "react";
// import { useComponentsStore } from "../../store/components";

function Header() {
    const [mode, setMode] = useState<'edit' | 'preview'>('edit'); // 编辑模式或预览模式 ['edit', 'preview'  ]
    // const {compoents,} = useComponentsStore();

    return (
        <div className="w-[100%] h-[100p%] ">
            <div className="h-[50px] flex justify-between items-center px-[20px] ">
                <h1 className="text-[20px] font-bold">低代码编辑器</h1>
                <Space>
                    {
                        mode == 'edit' ? (
                            <Button type="primary" onClick={() => setMode('preview')}>预览</Button>
                        ) : (
                            <Button type="primary" onClick={() => setMode('edit')}>退出预览</Button>)
                    }
                </Space>
            </div>
        </div>
    )
}
export default Header;